<template>
  <div>
    <el-button type="primary" @click="add">添加用户</el-button>
    <el-button type="danger" @click="batchDel">批量删除</el-button>
    <el-table
      :data="userList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column property="loginAct" label="账号" />
      <el-table-column property="name" label="姓名" show-overflow-tooltip />
      <el-table-column property="phone" label="手机" show-overflow-tooltip />
      <el-table-column property="email" label="邮箱" show-overflow-tooltip />
      <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
      <el-table-column label="操作" align="center" show-overflow-tooltip>
        <!-- 作用域插槽 -->
        <template #default="scope">
          <el-button type="primary" size="small" @click="view(scope.row.id)">详情</el-button>
          <el-button type="success" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"
    />

    <!-- 新增用户的弹窗(对话框) -->
    <el-dialog v-model="userDialogVisible" :title="userQuery.id > 0 ? '编辑用户': '新增用户'" width="55%" center draggable>
      <el-form ref="userRefForm" :model="userQuery" label-width="110px" :rules="userRules">
        <el-form-item label="账号" prop="loginAct">
          <el-input v-model="userQuery.loginAct" />
        </el-form-item>
        <el-form-item v-if="userQuery.id > 0" label="密码">
          <el-input type="password" v-model="userQuery.loginPwd" />
        </el-form-item>
        <el-form-item v-else label="密码" prop="loginPwd">
          <el-input type="password" v-model="userQuery.loginPwd" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userQuery.name" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="userQuery.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userQuery.email" />
        </el-form-item>
        <el-form-item label="账号是否过期" prop="accountNoExpired">
          <el-select v-model="userQuery.accountNoExpired" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="密码是否过期" prop="credentialsNoExpired">
          <el-select v-model="userQuery.credentialsNoExpired" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="账号是否锁定" prop="accountNoLocked">
          <el-select v-model="userQuery.accountNoLocked" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="账号是否可用" prop="accountEnabled">
          <el-select v-model="userQuery.accountEnabled" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="userDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="userSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { doGet, doPost, doPut, doDelete } from '../http/httpRequest'
import { messageTip, messageConfirm } from '../util/util'
export default {
  name: 'UserView',
  // 注入父级页面提供的所有属性、函数、对象等
  inject: ['age', 'reload'],
  data() {
    return {
      // 用户列表数据
      userList: [],
      total: 0,
      pageSize: 0,
      // 用户的弹窗是否弹出来
      userDialogVisible: false,
      // 定义用户表单对象
      userQuery: {},
      // 定义用户验证规则
      userRules: {
        loginAct: [
          { required: true, message: '登录账号不能为空', trigger: 'blur'}
        ],
        loginPwd: [
          { required: true, message: '登录密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须是中文', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern : /^1[3-9]\d{9}$/, message: '手机号格式有误', trigger: 'blur'}
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { pattern : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'}
        ],
        accountNoExpired: [
          { required: true, message: '请选择账号是否未过期', trigger: 'blur' }
        ],
        credentialsNoExpired: [
          { required: true, message: '请选择密码是否未过期', trigger: 'blur' }
        ],
        accountNoLocked: [
          { required: true, message: '请选择账号是否锁定', trigger: 'blur' }
        ],
        accountEnabled: [
          { required: true, message: '请选择账号是否可用', trigger: 'blur' }
        ]
      },
      // 下拉选项数组
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 }
      ],
      // 用户id的数组
      userIdArray: []
    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    // 勾选或者取消勾选时,触发该函数(已经勾选的数据传给这个函数)
    handleSelectionChange(selectionDataArray) {
      this.userIdArray = []
      selectionDataArray.forEach(data => {
        let userId = data.id
        this.userIdArray.push(userId)

        // if (this.userIdArray.indexOf(userId) === -1) {
        //   this.userIdArray.push(userId)
        // }
      })
    },
    // 批量删除
    batchDel() {
      if (this.userIdArray.length <= 0) {
        messageTip('请选择要删除的数据', 'warning')
        return
      }
      messageConfirm('您确定要删除这些数据吗?').then(() => {
        // 数组转成字符串
        let ids = this.userIdArray.join(',')
        doDelete('/api/user', {
          ids: ids
        }).then(resp => {
          if (resp.data.code === 200) {
            messageTip('批量删除成功', 'success')
            this.reload()
          } else {
            messageTip('批量删除失败, 原因: ' + resp.data.msg, 'error')
          }
        })
      }).catch(() => {
        messageTip('取消批量删除', 'warning')
      })
    },
    // 查询用户列表数据
    getData(current) {
      doGet('/api/users', {
        current: current, // 当前查询第几页
      }).then(resp => {
        if (resp.data.code === 200) {
          this.userList = resp.data.data.list
          this.total = resp.data.data.total
          this.pageSize = resp.data.data.pageSize
        }
      })
    },
    // 分页函数(current参数是elementPlus组件传过来,表示当前页)
    toPage(current) {
      this.getData(current)
    },
    view(id) {
      // 路由跳转
      this.$router.push('/dashboard/user/' + id)
    },
    add() {
      this.userQuery = {}
      this.userDialogVisible = true
    },
    // 新增用户提交保存
    userSubmit() {
      let formData = new FormData()
      for(let field in this.userQuery) {
        formData.append(field, this.userQuery[field])
      }
      this.$refs.userRefForm.validate(isValid => {
        if (isValid) {
          if (this.userQuery.id > 0) {
            // 编辑
            doPut('/api/user', formData).then(resp => {
              if (resp.data.code === 200) {
                messageTip('编辑成功', 'success')
                // 页面刷新
                this.reload()
                this.userDialogVisible = false
              } else {
                messageTip('编辑失败', 'error')
              }
            })
          } else {
            // 新增
            doPost('/api/user', formData).then(resp => {
              if (resp.data.code === 200) {
                messageTip('提交成功', 'success')
                // 页面刷新
                this.reload()
                this.userDialogVisible = false
              } else {
                messageTip('提交失败', 'error')
              }
            })
          }
        }
      })
    },
    // 编辑用户
    edit(id) {
      this.userDialogVisible = true
      this.loadUser(id)
    },
    // 加载用户信息
    loadUser(id) {
      doGet('/api/user/' + id, {}).then(resp => {
        if (resp.data.code === 200) {
          this.userQuery = resp.data.data
          this.userQuery.loginPwd = ''
        }
      })
    },
    // 删除
    del(id) {
      messageConfirm('您确定要删除该数据吗?').then(() => {
        doDelete('/api/user/' + id, {}).then(resp => {
          if (resp.data.code === 200) {
            messageTip('删除成功', 'success')
            this.reload()
          } else {
            messageTip('删除失败, 原因: ' + resp.data.msg, 'error')
          }
        })
      }).catch(() => {
        messageTip('取消删除', 'warning')
      })
    }
  }
}
</script>

<style>
  .el-table {
    margin-top: 12px;
    height: 460px;
  }
  .el-pagination {
    margin-top: 12px;
  }
  .el-select {
    width: 100%;
  }
</style>